<template>
  <div class="template-index-Lu">
      <commpVxeTable
          :key="reCommpVxeTable"
          :searchType="true"
          :conditionBtnRow="true"
          :config="dataTableConfig"
          :columns="columnsVxe"
          :formItem="formItem"
          @checkboxChange="checkboxChange"
          ref="administrativeOffice"
          @searchEvent="searchEvent"
          @resetEvent="resetEvent"
          >
          <template v-slot:ryfl_slot="{data}">
            <div :style="{width:data.widthString}">
              <a-select @change="handleChange">
                <a-select-option v-for="(item,index) in typeList" :key="index" :value="item.ZDZ">
                  {{ item.ZDWB }}
                </a-select-option>
              </a-select>
            </div>
          </template>
          <template v-slot:operation_xm="{row}" data-desc="申请人">
                <span style="padding-right: 21;" v-if="row.xm.length == 2 && row.xm">
                    <span v-for="(trem,tI) in row.xm.split('')" :key="tI" >
                        {{trem}}
                        <span v-if="tI+1 !== row.xm.split('').length">&nbsp;&nbsp;</span>
                    </span>
                </span>
                <span style="padding-right: 21;" v-else>{{ row.xm }}</span>
            </template>
      </commpVxeTable>
  </div>
</template>
<script>
import  assessCheckApi  from './service/api.js'
import  commpVxeTable   from '@/components/commp-vxe-table/commp-vxe-table.vue'
import  { queryQyrylxList }  from './service/index.js'
export default {
  components: {
      commpVxeTable,
  },
  props:{},
  data() {
      return {
          reCommpVxeTable: '',
          dataTableConfig: {
              api: assessCheckApi.queryQyRyJzqkTotal,
              rowId: 'id',
              paramet: {}
          },
          columnsVxe: [
              {
                  type: 'checkbox',
                  width: 60 ,
                  fixed: 'left'
              },{
                  title: '企业名称',
                  field: 'xdrmc',
              },{
                  title: '姓名',
                  field: 'xm',
                  width: 100,
                  titleInterval:true,
                  slots: {
                    default:'operation_xm',
                  }
              },{
                  title: '人员类型',
                  field: 'ryfl',
                  width: 200,
              },{
                  title: '学历',
                  field: 'xl',
                  width: 100,
              },{
                  title: '专业',
                  field: 'zy',
                  width: 150
              },{
                  title: '职务',
                  field: 'zw',
                  width: 150
              },{
                  title: '身份证号',
                  field: 'zjhm',
                  width: 250,
              },{
                  title: '联系手机',
                  field: 'sj',
                  width: 150,
              }
          ],
          formItem: [
              {
                  label: '企业名称',
                  model: 'xdrmc',
              },{
                  label: '姓名',
                  model: 'xm',
              },{
                  label: '人员类型',
                  model: 'ryfl',
                  slotName:'ryfl_slot',
                  width:125,
              },{
                  label: '身份证号',
                  model: 'zjhm',
                  searchType:'收起',
              },{
                  label: '联系手机',
                  model: 'sj',
                  searchType:'收起',
              }
          ],
          idList: [],
          typeList: [],
          windowInnerWidth: window.innerWidth
      }
  },
  mounted() {
    this.getData()
  },
  methods: {
      getData(){
        queryQyrylxList().then(res => {
          this.typeList = res.result
        })
      },
      handleChange(value) {
        //console.log(`selected ${value}`);
        this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
          ryfl: value
        }
      },
      // 勾选
      checkboxChange(val){
          //console.log('已选择',val)
          this.idList = []
          if(val.length){
              val.forEach(item => {
                  this.idList.push(item.jobid)
              });
          }
      },
      // 搜索
      searchEvent(){
          this.dataTableConfig.paramet = {
              ...this.dataTableConfig.paramet,
          }
      },
      // 重置
      resetEvent(){
          this.dataTableConfig.paramet = {
              ...this.dataTableConfig.paramet,
              ryfl: ''
          }
      },
      // 弹窗提交成功
      success(){
          // 刷新表格 清空id数组
          this.$refs.administrativeOffice.resetEvent()
          this.idList = []
      },
  },
}
</script>
